// reset
@import "reset.less";
// 变量
@import './variables.less';
// 动画
@import "./animate.less";

html.light {
  background-color: @bac;
  //transition: .5s;
  div.pre-code {
    background-color: @fontColor-bleak-bleak !important;
  }

  pre {
    background-color: @bac !important;
  }
}

html.dark {
  background-color: @bac-dark;
  //transition: .5s;
  div.pre-code {
    background-color: @bac-dark-bleak !important;
  }

  pre {
    background-color: @bac-dark-bleak !important;
  }
}

h4,
p {
  //font-family: '宋体';
  font-weight: 650;
}

.noselect {
  user-select: none;
}

// 动画持续时间 small
.btn-time-s {
  transition: .5s;
}

html {
  font-size: 20px;
}


h4 {
  margin-top: @m-small;
  font-size: 1.4rem;
  margin-bottom: .3rem;
  color: @fontColor;
}

p {
  font-size: 1rem;
  color: @fontColor;
  margin: @m-normal;
}

.ice-column {
  display: flex;
  flex-direction: column;
  margin: @m-small;
}

.ice-row {
  display: flex;
  flex-direction: row;
  margin: @m-small;
}

.item-row {
  display: flex;
  flex-direction: row;
  margin: @m-small;
}

.item-column {
  display: flex;
  flex-direction: column;
  margin: @m-small;
}

.border-normal {
  border: @fonColor-dark-bleak 1px solid;
  border-radius: @radio-n;
  padding: @p-normal;
}

// hover
.hoverTest {
  background-color: antiquewhite;
  .btn-time-s();

  &:hover {
    background-color: aquamarine;
  }
}

//border
.border-t {
  border-top: @themeColor 1px solid;
}

.border-b {
  border-bottom: @themeColor 1px solid;
}

.border-l {
  border-left: @themeColor 1px solid;
}

.border-r {
  border-right: @themeColor 1px solid;
}

// border-radio
.radio-none {
  border-radius: 0;
}

.radio-s {
  border-radius: .3rem;
}

.radio-m {
  border-radius: .5rem;
}

.radio-l {
  border-radius: .8rem;
}

.round {
  border-radius: 50%;

}

// 布局宽度/高度
// 宽度100%
.w100percent {
  width: 100%;
}

// flex布局的类名
// 允许换行
.flex-wrap {
  flex-wrap: wrap;
}

.flex-sb {
  display: flex;
  justify-content: space-between;
}

.flexFull {
  flex: 1;
}

.flex-align-center {
  display: flex;
  align-items: center;
}


.image-n {
  display: flex;
  width: 5rem;
  height: 5rem;
}

.image-s {
  display: flex;
  width: 3rem;
  height: 3rem;
}

.round {
  border-radius: 50%;
}

//padding 尺寸
.p-small {
  padding: @p-small;
}

.p-normal {
  padding: @p-normal;
}

.p-large {
  padding: @p-large;
}

.p-bottom-n {
  padding-bottom: @p-normal;
}

.p-bottom-l {
  padding-bottom: @p-large;
}

// ul布局
.list-column(@direction:column) {
  display: flex;
  flex-direction: @direction;

  .list-item {
    display: flex;
    flex-direction: @direction;
    padding: @p-normal;
    margin-left: @m-normal;
    margin-right: @m-normal;
    width: 100%;
  }
}

.list-row {
  .list-column(row);
}

// 文字不换行
.text-nowrap {
  white-space: nowrap;
}

// ice-message的全局配置
.ice-message-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 10px;
  top: 10px;
}

// avtice样式
.activeLink {
  color: @themeColorActive !important;
}


// drawer
.showDrawer {
  //filter: grayscale(80%);
  #app {
    filter: blur(.5rem);
  }
}

// hover时手指呀样式:
.pointer {
  &:hover {
    cursor: pointer
  }
}

.noBackground {
  background: none;
}

.noborder {
  border: none;
}

.container {
  margin: 0 auto;
}

.wideContainer {
  margin: 0 auto;
}

// 自适应
@media (max-width: 1200px) {
  .wideContainer {
    max-width: 95vw
  }

  .container {
    max-width: 95vw
  }
}

@media (min-width: 1200px) {
  .wideContainer {
    max-width: 70vw;
  }

  .container {
    max-width: 70vw;
  }
}

// 滚动条样式
.scrollStyle {
  &::-webkit-scrollbar {
    height: 20px;
    width: 5px;
    background: @bac;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: @fontColor;
  }
}

.space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.fit-content {
  width: fit-content;
}

.hidden-s {
  @media (min-width: 1200px) {
    display: none;
  }
}

.hidden-xs {
  @media (max-width: 900px) {
    display: none;
  }
}